<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>中译英</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
  <style>
    /*static 文件夹是默认用于存放静态文件的，比如 CSS、JavaScript、图片和字体文件等。
    Flask 会自动为 static 文件夹下的所有文件提供静态文件的路由，使得这些文件可以被直接访问，
    而不需要你为每个文件单独编写路由。*/
    @font-face {
        font-family: 'KingHwa'; /* 自定义字体名称 */
        /*此处将字体文件加入到static文件夹当中，就省去了编写路由的工作，ttf文件对应路由格式truetype*/
        src: url('../static/fonts/KingHwa_OldSong.ttf') format('truetype');/* 字体文件路径和格式 */
        font-weight: normal;
        font-style: normal;
    }
    body {
      background-color: rgba(173, 216, 230, 0.5); /*设置页面背景颜色*/
      font-family: "KingHwa", sans-serif; /*设置字体*/
    }
    .center-image {
      /*position: fixed;*/
      display: block;
      margin-top: 4%;
      margin-left: 40%;
      margin-right: 40%;
      border-radius: 4%; /* 设置圆角大小 */
      width: 20%; /* 你可以根据需要调整宽度 */
    }
    .center-bnt {
      /*position: fixed;*/
      display: block;
      margin-left: 45%;
      margin-right: 45%;
      width: 10%; /* 你可以根据需要调整宽度 */
    }
    .rounded-font {
      display: block;
      margin-top: 4%;
      border-radius: 2%; /* 设置圆角大小 */
      font-size: 360%; /* 设置字体大小 */
      text-align: center; /* 将文本居中 */
    }
    #backToTop {
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: 1px solid black;/*设置轮廓*/
      background-color: rgba(0, 0, 230, 0.5);
      color: white;
      cursor: pointer;
      padding: 4px 5px;
      border-radius: 2px;/*设置圆角*/
    }
    .default-img {
      /*position: fixed;*/
      display: block;
      {#margin-top: 10%;#}
      {#margin-top: 5%;#}
      margin-left: 30%;
      margin-right: 30%;
      width: 20%; /* 你可以根据需要调整宽度 */
      border-radius: 2%;/*设置圆角*/
    }
    .back-home {
        position: fixed;
        bottom: 15px; /* 初始时，将元素移出视口 */
        right: 100px;
        /* 其他样式 */
    }
    .bottom_left {
        position: fixed;
        bottom: 15px; /* 初始时，将元素移出视口 */
        left: 100px;
        /* 其他样式 */
    }
  </style>
</head>
<h1 class="rounded-font">中译英</h1>
<body>
    <form action="/ch2en" method="post" enctype = "multipart/form-data">
      <div class="row" style="margin-left:5%;">
        <div class="mb-3">
          <label for="inputQuestion" class="form-label">输入:</label>
          <textarea class="form-control"
                    id="inputQuestion"
                    rows="10" style="width: 90%;"
                    name="inputTxt">{{ data.input }}</textarea>
        </div>
        <div class="mb-3">
          <audio controls class="audio-player"
                 style="width: 20%; margin-left: 1%; vertical-align: middle;"></audio>
          <button type="button"
                  style="font-size: 150%; width:10%; margin-left: 1%;"
                  class="btn btn-primary record-btn">录音</button>
          <button type="submit"
                  class="btn btn-primary"
                  style="font-size: 150%; width: 10%; margin-left: 46%;">提交文本</button>
        </div>
        <div class="mb-3">
          <label for="outputQuestion" class="form-label">输出:</label>
          <textarea class="form-control"
                    id="outputQuestion"
                    rows="10" style="width: 90%;"
                    readonly>{{ data.output }}</textarea>
        </div>
      </div>
    </form>
    <br/>
    <br/>
    <button onclick="goToLink()"
            class="btn btn-primary btn-info center-bnt">返回首页</button>
    <script>
    function goToLink() {
        window.location.href = "{{ url_for('home') }}"
    }
    </script>
    <script src="../static/js/record.js"></script>
</body>
</html>